<template>
  <div class="goodsOrderList">
    <div class="goodsOrderList-head">
      <OrderHeader></OrderHeader>
    </div>
    <div class="goodsOrderList-main" ref="container">
      <!-- <van-sticky :offset-top="46"> -->
      <van-tabs v-model="active" animated sticky>
        <van-tab title="全部">
          <div class="goodsOrder-goods" v-if="orderList.length > 0">
            <div v-for="(goods, i) in orderList" :key="i" class="goods-item">
              <div class="goods-item-box">
                <h3>商品编号：{{ goods.goods_orderId }}</h3>
                <span v-if="goods.goods_type === 1">待付款</span>
                <span v-if="goods.goods_type === 2">待发货</span>
                <span v-if="goods.goods_type === 3">待收货</span>
                <span v-if="goods.goods_type === 4">待评价</span>
              </div>
              <CartGoodsItem :goods="goods"></CartGoodsItem>
            </div>
          </div>
          <!-- 为空时 -->
          <div class="goodsNull" v-else>
            <div class="null-img">
              <img src="@/assets/image/orderimg.png" alt="" />
              <p>还没有相关订单哦</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="待付款">
          <div class="goodsOrder-goods" v-if="orderListType1.length > 0">
            <div
              v-for="(goods, i) in orderListType1"
              :key="i"
              class="goods-item"
              v-show="goods.goods_type === 1"
            >
              <div class="goods-item-box">
                <h3>商品编号：{{ goods.goods_orderId }}</h3>
                <span>待付款</span>
              </div>
              <CartGoodsItem :goods="goods"></CartGoodsItem>
            </div>
          </div>
          <!-- 为空时 -->
          <div class="goodsNull" v-else>
            <div class="null-img">
              <img src="@/assets/image/orderimg.png" alt="" />
              <p>还没有相关订单哦</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="待发货">
          <div class="goodsOrder-goods" v-if="orderListType2.length > 0">
            <div
              v-for="(goods, i) in orderListType2"
              :key="i"
              class="goods-item"
            >
              <div class="goods-item-box">
                <h3>商品编号：{{ goods.goods_orderId }}</h3>
                <span>待发货</span>
              </div>
              <CartGoodsItem :goods="goods"></CartGoodsItem>
            </div>
          </div>
          <!-- 为空时 -->
          <div class="goodsNull" v-else>
            <div class="null-img">
              <img src="@/assets/image/orderimg.png" alt="" />
              <p>还没有相关订单哦</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="待收货">
          <!-- 为空时 -->
          <div class="goodsNull">
            <div class="null-img">
              <img src="@/assets/image/orderimg.png" alt="" />
              <p>还没有相关订单哦</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="待评价">
          <!-- 为空时 -->
          <div class="goodsNull">
            <div class="null-img">
              <img src="@/assets/image/orderimg.png" alt="" />
              <p>还没有相关订单哦</p>
            </div>
          </div>
        </van-tab>
        <van-tab title="售后">
          <!-- 为空时 -->
          <div class="goodsNull">
            <div class="null-img">
              <img src="@/assets/image/orderimg.png" alt="" />
              <p>还没有相关订单哦</p>
            </div>
          </div>
        </van-tab>
      </van-tabs>
      <!-- </van-sticky> -->
    </div>
  </div>
</template>

<script>
import OrderHeader from "@/components/OrderHeader.vue";
import CartGoodsItem from "@/components/CartGoodsItem.vue";
import { mapState } from "vuex";
export default {
  components: { OrderHeader, CartGoodsItem },
  data() {
    return {
      active: this.$route.query.active || 0,
    };
  },
  computed: {
    ...mapState("m_cart", ["orderList"]),

    orderListType1() {
      return this.orderList.filter((item) => item.goods_type === 1);
    },
    orderListType2() {
      return this.orderList.filter((item) => item.goods_type === 2);
    },
  },
  mounted() {
    document
      .querySelector("body")
      .setAttribute("style", " background-color: #f6f6f6");
  },
  beforeDestroy() {
    document.body.removeAttribute("style");
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-sticky--fixed {
  top: 46px;
}
::v-deep .van-tabs__line {
  bottom: 21px;
  width: 46px;
  background-color: #ff5577;
}
.goodsOrderList-head {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 88;
  background-color: #f6f6f6;
}
.goodsOrderList-main {
  margin-top: 46px;
  height: 100%;
  .goods-item {
    background-color: #fff;
    margin: 10px 10px 0 10px;
  }
  .goods-item-box {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    padding: 10px 16px 5px 16px;
    color: #999999;
  }
}
.goodsNull {
  margin-top: 10px;
  background-color: #fff;
  height: 100%;
  min-height: 300px;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .null-img {
    width: 257px;
  }
  img {
    width: 100%;
    border: none;
    vertical-align: middle;
    margin-bottom: 15px;
  }
  p {
    font-size: 16px;
    color: #666666;
  }
}
</style>